<template>
  <div style="height: 100%;">
    <el-breadcrumb separator-class='el-icon-arrow-right'>
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>统计分析</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="10" style="height: 48%">
      <el-col class="el-col" :span="12">
        <div class="card">
          <span class="card-caption">今日上报人数分析（单位：人）</span>
          <div id="chart1" class="chart" />
        </div>
      </el-col>
      <el-col class="el-col" :span="12">
        <div class="card">
          <span class="card-caption">今日体温情况（单位：人）</span>
          <div id="chart2" class="chart" />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="height: 48%">
      <el-col class="el-col" :span="24">
        <div class="card">
          <span class="card-caption">七天健康信息异常情况</span>
          <div id="chart3" class="chart" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'SocialEconomy',
  data() {
    return {
      option: {
        color: ['rgb(111, 172, 215)'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // shadow or line
          }
        },
        grid: {
          top: '20%',
          right: '10%',
          bottom: '12%',
          left: '10%'
        },
        toolbox: {
          show: true,
          right: '2%',
          feature: {
            saveAsImage: {
              pixelRatio: 0
            }
          }
        }
      },
      chartData1: {
        xData: ['发热人数', '生病人数', '外出人数'],
        yData: [20, 50, 100]
      },
      chartData2: {
        xData: ['小于36.0', '36.0-36.5', '36.5-37.0', '37.0-37.5', '大于37.5'],
        yData: [9, 15, 50, 88, 3]
      }
    }
  },
  mounted() {
    this.buildChart2()
    this.buildChart3()
    this.buildChart4()
  },
  methods: {
    buildChart2() {
      const chart1 = echarts.init(document.getElementById('chart2'))
      chart1.setOption({
        color: this.option.color,
        tooltip: this.option.tooltip,
        grid: this.option.grid,
        toolbox: this.option.toolbox,
        legend: {
          top: '4%',
          right: '10%',
          icon: 'rect',
          itemGap: 30,
          itemWidth: 24,
          itemHeight: 10,
          textStyle: {
            color: '#444444',
            fontSize: 13
          },
          data: this.chartData2.xData
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: '#e0e0e0'
            }
          },
          axisLabel: {
            color: '#444444',
            fontSize: 13
          },
          axisTick: { show: false },
          data: this.chartData2.xData
        },
        yAxis: {
          type: 'value',
          nameTextStyle: {
            color: '#444444'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#f4f4f4'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#e0e0e0'
            }
          },
          axisLabel: {
            color: '#444444',
            fontSize: 13
          },
          axisTick: { show: false }
        },
        series: [{
          barWidth: 20,
          itemStyle: {
            normal: {
              barBorderRadius: 10
            }
          },
          data: this.chartData2.yData,
          type: 'bar'
        }]
      })
      window.addEventListener('resize', chart1.resize())
    },
    buildChart3() {
      const chart1 = echarts.init(document.getElementById('chart3'))
      chart1.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['发热', '生病', '外出']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.makeDate()
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '发热',
            type: 'line',
            stack: 'Total',
            data: [10, 15, 9, 12, 3, 18, 10]
          },
          {
            name: '生病',
            type: 'line',
            stack: 'Total',
            data: [20, 25, 33, 10, 40, 25, 33]
          },
          {
            name: '外出',
            type: 'line',
            stack: 'Total',
            data: [50, 32, 21, 54, 60, 40, 41]
          }
        ]
      })
      window.addEventListener('resize', chart1.resize())
    },
    buildChart4() {
      const chart1 = echarts.init(document.getElementById('chart1'))
      chart1.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '今日健康信息填报情况',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '已上报' },
              { value: 735, name: '未上报' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
      window.addEventListener('resize', chart1.resize())
    },
    makeDate() {
      let days = []
      const a = new Date()
      for (let i = 0; i <= 144; i += 24) {
        let dateItem = new Date(a.getTime() - i * 60 * 60 * 1000)
        let m = dateItem.getMonth() + 1
        let d = dateItem.getDate()
        m = this.addDate0(m)
        d = this.addDate0(d)
        let valueItem = m + '-' + d
        days.push(valueItem)
      }
      return days.reverse()
    },
    addDate0(time) {
      if (time.toString().length === 1) {
        time = '0' + time.toString()
      }
      return time
    }
  }
}
</script>

<style scoped>
.card {
  height: 98%;
  background: #ffffff;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.card-caption {
  border-left: 3px solid #1860cc;
  padding: 3px 0 3px 10px;
  line-height: 80px;
  color: #000000;
  font-size: 16px;
  margin-left: 20px;
  vertical-align: top;
}
.el-col {
  height: 100%;
}
.chart{
  margin: 0 10px;
  width: calc(100% - 20px);
  height: calc(100% - 80px);
}
</style>
